<template>
  <div>
    <el-select v-model="pro_index" placeholder="请选择" @change="selectZone" style="margin-right: 10px">
      <el-option :label="v.pro_name" :value="index" :key="index"
                 v-for="(v,index) in qhJson"></el-option>
    </el-select>
    <el-select v-model="city_index" placeholder="请选择" @change="selectZoneCity" style="margin-right: 10px">
      <el-option :label="v.city_name" :value="index" :key="index"
                 v-for="(v,index)  in province"></el-option>
    </el-select>
    <el-select v-model="area_index" placeholder="请选择" @change="selectZoneAreas" style="margin-right: 10px">
      <el-option :label="v.area_name" :value="i" :key="i"
                 v-for="(v,i) in city"></el-option>
    </el-select>
    <el-select v-model="street_index" placeholder="请选择" @change="selectZoneStreet">
      <el-option :label="v.street_name" :value="i" :key="i"
                 v-for="(v,i) in areas"></el-option>
    </el-select>
  </div>
</template>

<script>
import qhJson from '../assets/省市区县四级JSON数据.json'

export default {
  name: "NationalDivision",
  props: {
    value: {
      type: String,
      default: ''
    }
  },
  watch: {
    value(v) {
      if (v) {
        v = v.replace(/'/g, '"');
        let d = JSON.parse(v)
        this.pro_index = d.pro.pro_id
        this.selectZone(d.pro.pro_id)
        this.selectZoneCity(d.city.city_id)
        this.selectZoneAreas(d.area.area_id)
        this.data.street = this.areas[d.street.street_id]
        this.city_index = d.city.city_id
        this.area_index = d.area.area_id
        this.street_index = d.street.street_id
      }
    }
  },
  data() {
    return {
      pro_index: '',
      city_index: '',
      area_index: '',
      street_index: '',
      qhJson: [],
      province: [],
      city: [],
      areas: [],
      data: {
        pro: {},
        city: {},
        area: {},
        street: {},
      }
    }
  },
  mounted() {
    this.qhJson = qhJson
  },
  methods: {
    selectZone(index) {
      let pro = this.qhJson[index]
      this.province = pro.pro_cities;
      this.data.pro = {
        pro_code: pro.pro_code,
        pro_id: index,
        pro_name: pro.pro_name
      }
    },
    selectZoneCity(index) {
      let city = this.province[index]
      this.city = city.city_areas;
      this.data.city = {
        city_code: city.city_code,
        city_id: index,
        city_name: city.city_name
      }
    },
    selectZoneAreas(index) {
      let area = this.city[index]
      this.areas = area.area_streets;
      this.data.area = {
        area_code: area.area_code,
        area_id: index,
        area_name: area.area_name
      }
    },
    selectZoneStreet(index) {
      this.data.street = this.areas[index]
      this.data.street.street_id = index;
      let s = JSON.stringify(this.data)
      s = s.replace(/"/g, '\'');
      this.$emit('input', s)
    }
  },
}
</script>

<style scoped>

</style>